<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页-h5</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="./swiper-3.3.1.min.css">
	<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
	<script src="/js/jquery-1.12.0.min.js"></script>
	<script src="./swiper-3.3.1.jquery.min.js"></script>
	<style>
	@charset "utf-8";
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	ol, ul {
		list-style: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	img, fieldset { border: none; vertical-align: top;}
	.left { float: left; }
	.right { float: right; }
	hr{
	clear:both;
	}
	.clear:after{
		content:".";
		display:block;
		height:0;
		clear:both;
		visibility:hidden;
	}
	* html .clear{height:1%}/*ie5+ie6*/
	*:first-chile+html .clear{min-height:1px;}/*ie7*/
	html, body {
		height: 100%;
	}
	html {
		width: 100%;
		/*font-size: 100px;*/
		font-family: "Hiragino Sans GB", sans-serif;
	}
	body {
		width: 100%;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 12px;
		color:#5f6366;
		line-height: 1.5;
		margin: 0;
		padding: 0;
	}
	
	.swiper-container {
		width: 10rem;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
	.swiper-wrapper{width: 10rem;}
	.swiper-slide {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 18px;
	}
	.swiper-container .bottom-desc{width: 10rem; height: 1.1rem; background-color: #fbe2e9;}
	.swiper-container .bottom-desc img{height: 1.1rem;}
	.swiper-container .controll{position: absolute;width: .859rem;height: 5rem;top: 0; background-image: url(./img/arrow.png); background-repeat: no-repeat; background-size: 74px; z-index: 5;}
	.swiper-container .arrow-left{left: 0; background-position: -10%;}
	.swiper-container .arrow-right{right: 0; background-position: 110%;}
	.main{width: 10rem; margin-right: auto; margin-left: auto;}
	.top{background-color: #ec6c91;}
	.product-list{margin-left: .2rem; margin-right: .2rem; margin-bottom: .2rem;}
	.product-list ul li{display: inline-block; width: 43%; padding-left: 3.5%; padding-right: 3.5%; margin-top: .625rem; vertical-align: top; font-size: .4rem;}
	.product-list ul li .tit-desc{margin-top: .125rem;}
	.product-list ul li .price{color: #d30707; margin-top: .125rem;}
	.product-list ul li .price-de{text-decoration: line-through; float: right; color: #5f6366;}
	.more-video{display: block; background-image: url(./img/more.jpg); background-repeat: no-repeat; background-size: contain; width: 10rem; height: .781rem; background-color: #fbe2e9; background-position: center;}
	.suspension{position: fixed; bottom: 2.5rem; right: .1rem; z-index: 6;}
	.suspension ul li{width: .9375rem; height: .9375rem; background-size: contain; margin-top: 10px;}
	.suspension ul li a{display: block; width: 100%; height: 100%;}
	.suspension ul li.icon-1{background-image: url(img/f1.png);}
	.suspension ul li.icon-2{background-image: url(img/f2.png);}
	.suspension ul li.icon-3{background-image: url(img/f3.png);}
	.suspension ul li.icon-4{background-image: url(img/f4.png);}
	.home-page{width: 10rem; background-image: url(./img/home.jpg); background-size: contain; background-position: center; height: 100%; position: relative; margin-left: auto; margin-right: auto;}
	.home-page .nav{width: 10rem; height: 3.4375rem; background-image: url(./img/nav-bg.png); background-repeat: no-repeat; background-position: center bottom; position: absolute; bottom: 16%; background-size: 7.109375rem;}
	.home-page .nav-n{position: absolute; width: 1.84375rem; height: 2.59375rem; background-repeat: no-repeat; background-size: contain;}
	.home-page .nav-1{background-image: url(./img/nav-1.png); left: .9375rem; bottom: 25px;}
	.home-page .nav-2{background-image: url(./img/nav-2.png); left: 4.075rem; top: 0}
	.home-page .nav-3{background-image: url(./img/nav-3.png); left: 7rem; top: 0}
	</style>
</head>
<body>
	<div class="home-page" id="top">
		<div class="nav">
			<a href="#lc2" class="nav-n nav-1"></a>
			<a href="#lc1" class="nav-n nav-2"></a>
			<a href="#lc3" class="nav-n nav-3"></a>
		</div>
	</div>
	<div class="main" id="lc1">
		<div class="top">
			<img src="img/meiyi.png" alt="美衣" width="100%">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODg0NDY0NA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODgzMzAwMA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
				</div>
						<!-- 如果需要导航按钮 -->
		    <div class="controll arrow-left"></div>
		    <div class="controll arrow-right"></div>
			</div>
		</div>
		<div class="product-list">
			<ul>
				<li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="main" id="lc2">
		<div class="top">
			<img src="img/meizhuang.png" alt="美装" width="100%">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODg0NDY0NA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODgzMzAwMA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
				</div>
						<!-- 如果需要导航按钮 -->
		    <div class="controll arrow-left"></div>
		    <div class="controll arrow-right"></div>
			</div>
		</div>
		<div class="product-list">
			<ul>
				<li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li>
			</ul>
		</div>
	</div>

	<div class="main" id="lc3">
		<div class="top">
			<img src="img/meishi.png" alt="美食" width="100%">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODg0NDY0NA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
					<div class="swiper-slide">
						<iframe src="http://player.youku.com/embed/XMTU4ODgzMzAwMA==" frameborder=0 allowfullscreen style="width:8.281rem; height:5rem; vertical-align:top"></iframe>
						<div class="bottom-desc"><img src="./img/slide-desc-1.png" alt="描述"></div>
					</div>
				</div>
		    <div class="controll arrow-left"></div>
		    <div class="controll arrow-right"></div>
			</div>
		</div>
		<div class="product-list">
			<ul>
				<li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li><li>
					<img src="http://i3.chunboimg.com/group1/M00/11/3A/Cv4IdVdHudGADjREAAqy5-Yafzg038_290_232.jpg" alt="商品名称" width="100%">
					<div class="tit-desc">商品名称 商品描述</div>
					<div class="price">￥ 344.2<div class="price-de">￥ 344.2</div></div>
				</li>
			</ul>
		</div>
	</div>
	<a class="more-video" href="go-to-more-video"></a>
	<!-- 悬浮nav -->
	<div class="suspension">
		<ul>
			<li class="icon-1"><a href="#lc1"></a></li>
			<li class="icon-2"><a href="#lc2"></a></li>
			<li class="icon-3"><a href="#lc3"></a></li>
			<li class="icon-4"><a href="#top"></a></li>
		</ul>
	</div>
	<script>  
		$(document).ready(function () {      
			
			var swiper = new Swiper('.swiper-container', {
				loop:true,
				autoplay:5000,
				nextButton: '.arrow-right',
				prevButton: '.arrow-left',
			});
		});
			 
  </script>
</body>
</html>
